<template>
	<view id="CDKList">
		<view class="CDK_title">兑换链接</view>
		<view class="dynamicType">
			<view class="title">{{dynamic.title}}</view>
			<view class="content">{{dynamic.content}}</view>
		</view>
		<view class="CDK_list">
			<!-- <view class="CDK_statistics">
				<view>已生成:
					<span>{{CDKList.length}}</span>
					<span class="fuzhi" @click="copyingAll">复制全部</span>
				</view>
				<view>已兑换: <span>20</span> </view>
				<view>未兑换: <span>20</span> <span class="fuzhi">复制全部</span></view>
			</view> -->
			<view class="CDK">
				<view class="titleList">
					<view>兑换链接</view>
					<view> </view>
					<view>状态</view>
					<view>兑换人</view>
					<view>兑换时间</view>
					<view style="width: 5%;"></view>
				</view>
				<view class="titleList" style="font-size: 26rpx;" v-for="(item,index) in CDKList"
					@mouseover="currentIndex = index" @mouseleave="currentIndex = null"
					@click="currentIndex = index"
					>
					<view>
						<view class="ckdType">{{item.code}}</view>
					</view>
					<view style="color: #ff6600;" @click="copyingItem(item.code)">复制</view>
					<view>{{item.type==1 ? '未兑换':'已兑换'}}</view>
					<view>{{item.type==1 ? '---':item.use_uuid.nickname}}</view>
					<view>
						<timeDispose :dateTime="item.use_time || ''"></timeDispose>
					</view>
					<view class="del">
						<view class="del_icon" @click="delCDK(item.code)" v-if="currentIndex == index">
							×
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view style="height: 100rpx;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dynamicId: '',
				CDKList: [],
				dynamic: {},
				currentIndex: '', //用于跟踪当前悬停的索引
			}

		},
		onLoad(option) {
			this.dynamicId = option.dynamicId;

			this.getCDKList(option.dynamicId);
			this.getDynamic(option.dynamicId)
			this.time = uni.$u.timeFrom(this.timestamp);
		},
		methods: {
			getCDKList(dynamicId) {
				this.$api.getCodes({
					dynamic_id: dynamicId
				}).then(res => {
					this.CDKList = res.data
				})
			},
			getDynamic(dynamicId) {
				this.$api.getDynamicDetail({
					id: dynamicId
				}).then(res => {
					this.dynamic = res.data
				})
			},
			delCDK(code) {
				this.$api.delCode({
					code: code
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							message: "删除成功!",
							bgColor: '#d9534f'
						});
						 setTimeout(() => {
						        uni.reLaunch({
						            url: '/pages/home/CDKList/CDKList?dynamicId=' + this.dynamicId
						        });
						    }, 2000);
					}
				})
			},

			// 复制全部code
			copyingAll() {

			},
			copyingItem(code) {
				uni.setClipboardData({
					data: code,
				});
			}

		},
	}
</script>

<style scoped lang="scss">
	#CDKList {
		width: 100%;
		background: linear-gradient(to bottom, #f9f9f9, #fff, #fff);
		/* 渐变颜色 */
	}

	.CDK_title {
		width: 90%;
		margin: auto;
		font-weight: bold;
		font-size: 50rpx;
		line-height: 3;
	}

	.dynamicType {
		width: 90%;
		margin: auto;
		border: 1px #c0c0c0 solid;
		padding: 40rpx 0;
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 3rem;

		.title {
			line-height: 3;
			text-indent: 1rem;
		}

		.content {
			line-height: 1.5;
			width: 90%;
			margin: auto;
			text-indent: 1rem;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
		}
	}

	.CDK_list {
		width: 90%;
		margin: auto;

		.CDK_statistics {
			view {
				margin: 25rpx 0;
				color: #949494;

				span {
					color: #000;
					display: inline-block;
					margin-left: 20rpx;
				}

				.fuzhi {
					display: inline-block;
					color: #ff6600;

				}
			}
		}
	}

	.CDK {

		.titleList {
			display: flex;
			align-items: center;
			border-bottom: 1px #7f7f7f solid;

			.del {
				width: 30rpx;
				height: 30rpx;

				view {
					width: 100%;
					height: 100%;
					line-height: 25rpx;
					border-radius: 100rpx;
					background-color: #cecece;
					color: #fff;
				}
			}

			view {
				width: 20%;
				line-height: 3;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;

				.ckdType {
					width: 100%;
					text-align: left;
				}
			}
		}
	}
</style>